/**
 * 客服模式下的联系人列表
 */
import { SearchOutlined } from '@ant-design/icons'
import { keywordCompare } from '@gnlab/utils'
import { Input } from 'antd'
import AutoSizer from 'react-virtualized-auto-sizer'
import { FixedSizeList as List } from 'react-window'
import { Empty } from '@/desktop/components'
import {
  useExternalTransferNotifications,
  useComputedContacts,
  useShowCurrent,
  useContactItem,
  useKeepPositon,
} from '@/desktop/logics/contacts'
import useTabUnreadNotice from '@/desktop/logics/tab-unread-notice'
import { ContactType } from '@/services/contacts'
import { ContactItem } from './item'

export function ContactsServiceMode() {
  useTabUnreadNotice()
  useExternalTransferNotifications()

  const { contacts: typeContactsData } = useComputedContacts(ContactType.external)
  const fullContactsData = useMemo(
    () => typeContactsData.transfers?.filter(v => !v.contact.transfer.isGive),
    [typeContactsData.transfers],
  )

  const [keyword, setKeyword] = useState('')
  const contactsData = useMemo(() => {
    if (!keyword) return fullContactsData ?? []
    return (fullContactsData ?? []).filter(item => keywordCompare(keyword, item.contact.name))
  }, [fullContactsData, keyword])

  const listRef = useRef<List | null>(null)
  useShowCurrent(() => {}, listRef.current, contactsData)

  const itemSize = 88
  const { Item, itemKey } = useContactItem(ContactItem)
  const { listOuterRef, onItemsRendered } = useKeepPositon(
    ContactType.external,
    contactsData,
    itemSize,
    listRef.current,
  )

  const renderList = ({ width, height }: { width: number; height: number }) => {
    return <List
      ref={listRef}
      onItemsRendered={onItemsRendered}
      height={height}
      width={width}
      itemCount={contactsData.length}
      itemSize={itemSize}
      itemData={contactsData}
      itemKey={itemKey}
      outerRef={listOuterRef}
    >
      {Item}
    </List>
  }

  return <div css={s.contacts}>
    <header>
      <Input
        placeholder="搜索客户"
        prefix={<SearchOutlined />}
        onChange={e => setKeyword(e.target.value.trim())}
        allowClear
      />
    </header>
    <main>
      {!(fullContactsData?.length ?? 0) ? (
        <Empty description="没有需要处理的客户" />
      ) : !contactsData.length ? (
        <Empty description="没有匹配的客户" />
      ) : (
        <AutoSizer>{renderList}</AutoSizer>
      )}
    </main>
  </div>
}

const s = {
  contacts: css`
    background-color: #fff;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    max-width: 450px;
    min-width: 300px;
    position: relative;
    width: 30vw;
    z-index: 1;

    & > header {
      padding: 20px;

      .ant-input-affix-wrapper {
        background-color: #f5f5f5;
        border: none;
        box-shadow: none;
        padding: 6px 12px;
        .ant-input-prefix {
          font-size: 18px;
          color: rgba(0, 0, 0, 0.35);
          margin-right: 8px;
        }
        input {
          background-color: transparent;
        }
      }
    }

    & > main {
      flex: 1;
      overflow: hidden;
    }
  `,
}
